import ModuleF from '../js/fangdaj.js'
import StepNumber from "../js/StepNumber.js";
import detaShopping from './deta-shopping.js';
import up from '../js/up.js';
import deta from '../js/deta.js';
var main,cookie
init()



async function init() {
    var response = await fetch("http://localhost:3860/xiangqing")
    var data = await response.json();
    var search=location.search
    cookie=localStorage
    yesAndNo(search,data)
}


function cookieHandler(cookie){
    var cont2=document.querySelector(".cont2")
    var cont3=document.querySelector(".cont3")
   
    if(cookie.bool){
        cont2.style.display="none";
        cont3.style.display="block"
        cont3.innerHTML=`
        <ul>
        <li>
            <span>${cookie.input}</span>
            <img src="https://p3.lefile.cn/product/adminweb/2019/01/22/f1d4b5d5-b229-4bb5-93f4-7f0e64b274fe.png"
                alt="" class="imgs">
        </li>
        <li>
            <a href="../sass/shopping.html">
                <img src="https://p2.lefile.cn/product/adminweb/2019/01/18/9f0e8935-982b-4ca9-8772-28da55bd3c5e.png"
                    alt="" class="img1">
            </a>
        </li>
    </ul>
        `
    }else{
        cont2.style.display="block";
        cont3.style.display="none"
    }
}

function yesAndNo(search,data){
    main=document.querySelector("main")
 
    if(search){
        var ar1=search.split("?")[1].split("=")
        
        if(ar1[0]=="pid"){
            data.forEach(item => {
                if (item.pid==ar1[1]) {
                    show(item,main)
                    var step=new StepNumber();
                    step.appendTo("#div1");
                    detaShopping.init4(item)
                }
            });

            ModuleF.init3()
            deta.init6()
            cookieHandler(cookie)
          
            up.up()
        }else{
            alert("参数有误");
            location.href="../sass/list.html"
        }
    }else{
        alert("非法进入");
        location.href="../sass/list.html"
    }
}

function show(data,main){
    main.innerHTML=`
    <div class="nav">
    <div class="nav-con">
        <a href="../sass/list.html">首页</a>
       ${data.user}
        <a href="javascript:;" class="a-right">
            <div>
                <span>联系客服</span>
                <img src="https://p4.lefile.cn/product/adminweb/2019/08/14/4467e513-fa34-4081-bbc3-05390e1196e3.png"
                    alt="">
            </div>
        </a>
    </div>
</div>
<div class="nav-content">
    <div class="nav-left">
        <div class="banner" id="show">
            <div id="zoom-class">
                <div id="mini">
                    <div id="maks"></div>
                </div>
                <div id="zoom">
                    
                </div>
            </div>
        </div>
        <div class="banner-list">
            <a href="javascript:;" class="a-left">
                <div class="a-warp">
                    <div class="a-lef1"></div>
                    <div class="a-lef2"></div>
                </div>
            </a>
            <a href="javascript:;" class="a-rights">
                <div class="a-warp">
                    <div class="a-righ1"></div>
                    <div class="a-righ2"></div>
                </div>
            </a>
            <div class="ban-list">
                <ul class="tran">
                    <li>
                        <img src="${data.fangdaj1}"
                            alt="" class="imgCon">
                    </li>
                    <li>
                    <img src="${data.fangdaj2}"
                    alt="" class="imgCon">
                    </li>
                    <li>
                    <img src="${data.fangdaj3}"
                    alt="" class="imgCon"></li>
                    <li>
                    <img src="${data.fangdaj4}"
                    alt="" class="imgCon"></li>
                    <li>
                    <img src="${data.fangdaj5}"
                    alt="" class="imgCon"></li>
                    <li>
                    <img src="${data.fangdaj6}"
                    alt="" class="imgCon"></li>
                    <li>
                    <img src="${data.fangdaj7}"
                    alt="" class="imgCon">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="nav-right">
        <div>
            <h1>${data.biaoti}</h1>
        </div>
        <div class="dec">
            ${data.jishao}
        </div>
        <div class="active">
            <div class="active-box">
                <span>秒杀</span>
            </div>
        </div>
        <div class="price">
            <div class="price-warp">
                <div class="jiage">
                    <div class="desc">秒杀价</div>
                    <div class="group">
                        <span>￥</span>
                        <span>${data.jiage}</span>
                    </div>
                    <div class="del">
                        <span>￥</span>
                        <span>6999</span>
                    </div>
                </div>
                <div class="pingjia">
                    <div class="p-top">累计评价</div>
                    <div class="p-foot">45794</div>
                </div>

            </div>
            <div class="secervl">
                <div class="sec-box">
                    <div class="sec-left">
                        <span>活动</span>
                    </div>
                    <div class="sec-right">
                        <div class="container">
                            <div class="fenqi">
                                <em>分期免息</em>
                            </div>
                            <div class="youhui">
                                <em>0元享</em>
                                <em>10元抵100元</em>
                                <em>购机送鼠标</em>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="staff">
            <div class="staff-top">增值业务</div>
            <div class="staff-foot">
                <span>支持</span>
                <div>
                    <img src="https://p3.lefile.cn/product/adminweb/2019/07/04/a66983ae-df77-4380-8d3c-6ff2d467465b.png"
                        alt="">
                    <span>以旧换新</span>
                </div>
                <span>高价回收，急速到账换新机</span>
            </div>
        </div>
        <div class="guige">
            <ul>
                <li class="xiton">
                    <div class="x-top">操作系统</div>
                    <div class="x-foot">
                        <span>
                            Windows 10 家庭中文版
                        </span>
                        <span>
                            Windows 11 家庭中文版
                        </span>
                    </div>
                </li>
                <li class="peizhi">
                    <div class="peizhi-top">选择配置</div>
                    <div class="peizhi-foot">
                        <span>【i7/16GB/512G SSD/2060】钛晶灰</span>
                        <span>【 i7/16GB/512G SSD/1650Ti】钛晶...</span>
                        <span>【i7/16GB/512G SSD/2060】冰魄白</span>
                        <span>【i5/16G/512G SSD/ GeForce RTX3...</span>
                        <span>【i5/16G/512G SSD/ GeForce RTX 3...</span>
                        <span>【i7/16G/512G SSD/ GeForce RTX™...</span>
                        <span>【i5/16G/512G SSD/ GeForce RTX™...</span>
                        <span>【i7/16G/512G SSD/ GeForce RTX™...</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="shuliang">
            <div class="shuliang-txt">购买数量</div>
            <div class="shuliang-s" id="div1"> </div>
        </div>
        <div class="btn">
            <div>&nbsp;</div>
            <div class="btn-1">
                <div class="btn-2">
                    <div class="btn-3">加入购物车</div>
                </div>
            </div>
        </div>
        <div class="toapp">
            <p>使用
                <span>联想智选APP</span>
                下单，享受更多优惠
            </p>
        </div>
        <div class="shuoming">
            <div class="s-left">服务说明<i></i>
            </div>
            <div class="s-right">
                <span>
                    <i></i>
                    联想自营
                </span>
                <span>
                    <i></i>
                    联想发货&售后
                </span>
                <span>
                    <i></i>
                    7天无忧退换
                </span>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="top">
        <div class="top-warp">
            <div class="top-txt">拯救者 Y7000 2021 英特尔酷睿i5 15.6英寸游戏笔记本 幻影黑</div>
            <ul>
                <li>商品详情</li>
                <li>配置信息</li>
                <li>商品评价(45993)</li>
                <li>服务支持</li>
                <li class="lis"><span>立即购买</span></li>
            </ul>
        </div>
    </div>
</div>
<div class="info-box">
    <div style="height: 10px;"></div>
    <a href="javascript::"><img
            src="https://p3.lefile.cn/fes/cms/2022/01/18/lfw07y7q5ivhfsfbcoiibh25j9u9pk851553.jpg" alt=""></a>
    <a href="javascript::"> <img
            src="https://p1.lefile.cn/fes/cms/2022/01/14/0n3xzzmf7jdb12q6zymhvzvuncfvq1307297.jpg" alt=""></a>
    <a href="javascript::"> <img
            src="https://p2.lefile.cn/fes/cms/2021/12/14/iykunv5znigm69k9zsig63xnled5a8822887.jpg" alt=""></a>
    <div class="img">
        <p>
            <img src="${data.xiangq1}"
                alt="">
            <img src="${data.xiangq2}"
                alt="">
            <img src="${data.xiangq3}"
                alt="">  
        </p>
    </div>
</div>
`
}